<script setup>
 import { Edit } from '@element-plus/icons-vue' 
 import IndexEcharts from '@/components/Home/echarts/IndexEcharts.vue'
</script>
<template>
  <el-row style="margin-top: 1vh;">
    <el-col :span="6">
      <div>
        <el-card class="aside">
          <div class="title">
            <div class="color"></div>
            <span>2024年9月8日</span>
          </div>
          <hr style="opacity: 0.3;">
          <div class="water">
            <div>
              <span class="water_address">广州</span>
              <el-icon :size="20">
              <Edit />
              </el-icon>
              <span class="water_now">今天：阴 25°-30°</span>
            </div>
            <div>
              <span class="water_temperatrue">26.8°C</span>
              <span class="water_wind">阴 西北风 一级</span>
            </div>
            <div class="water_forecast">
              <div>
                <p>今天</p>
                <p>25°-30°</p>
              </div>
              <div>
                <p>明天</p>
                <p>23°-27°</p>
              </div>
              <div>
                <p>后天</p>
                <p>20°-25°</p>
              </div>
            </div>
          </div>
          <div class="title">
            <div class="color"></div>
            <span>水产养殖基地</span>
          </div>
          <hr style="opacity: 0.3;">
          <div class="base">
            <ul>
              <li>
                <div></div>
                <span class="base_name">测试地块1</span>
                <span class="base_area">256.1亩</span>
                <el-icon :size="20" class="icon">
                <Edit />
                </el-icon>
                <hr style="opacity: 0.3;">
              </li>
              <li>
                <div></div>
                <span class="base_name">测试地块2</span>
                <span class="base_area">233.1亩</span>
                <el-icon :size="20" class="icon">
                <Edit />
                </el-icon>
                <hr style="opacity: 0.3;">
              </li>
            </ul>
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="18">
      <!-- 头 -->
      <el-header>
        <el-card class="head">
          <div class="title">
            <div class="color"></div>
            <span>溯源总览</span>
          </div>
          <hr style="opacity: 0.3;">
          <el-row>
            <el-col  :span="14">
              <div class="Trace_number">
                <div class="item">
                  <p>1</p>
                  <span>溯源商品</span>
                </div>
                <div class="item">
                  <p>0</p>
                  <span>溯源批次数</span>
                </div>
                <div class="item">
                  <p>2</p>
                  <span>资质证书</span>
                </div>
                <div class="item">
                  <p>1</p>
                  <span>溯源码</span>
                </div>
              </div>
              <div class="Trace_infor">
                <p class="infor_title">溯源信息完成情况</p>
                <hr style="opacity: 0.3;">
                <div style="display: flex;">
                  <div class="Trace_chart">
                  <IndexEcharts></IndexEcharts>
                </div>
                <div class="Trace_table">
                  <el-table :data="tableData" style="width: 28vw">
                    <el-table-column prop="date" label="产品" class="item"/>
                    <el-table-column prop="name" label="基础信息"  class="item"/>
                    <el-table-column prop="name" label="环境展示"  class="item"/>
                    <el-table-column prop="address" label="监测报告" class="item"/>
                  </el-table>
                </div>
                </div>
              </div>
            </el-col>
            <el-col class="" :span="10">
              <p class="Trace_count">溯源浏览统计</p>
            </el-col>
          </el-row>
        </el-card>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <el-card class="main">
          <div class="title">
            <div class="color"></div>
            <span>商品信息</span>
          </div>
        <el-table :data="tableData" style="width: 100%" class="product_table">
        <el-table-column prop="date" label="产品图片"   class="item"/>
        <el-table-column prop="name" label="产品名称"   class="item"/>
        <el-table-column prop="name" label="产品数量"   class="item"/>
        <el-table-column prop="name" label="产品分类"   class="item"/>
        <el-table-column prop="name" label="操作"       class="item"/>
        </el-table>
        </el-card>
      </el-main>
    </el-col>
  </el-row>
</template>



<style scoped>
@import url('./Home.css');
</style>